<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/vue-qriously.js"></script>
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="orderno"
                label="订单号"
                width="240">
        </el-table-column>
        <el-table-column
                prop="ywrq"
                width="210"
                label="游玩日期">
        </el-table-column>
        <el-table-column
                prop="scenicname"
                width="240"
                label="景区名称">
        </el-table-column>
        <el-table-column
                prop="ticketname"
                label="门票名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="price"
                label="单价"
                width="90">
        </el-table-column>
        <el-table-column
                prop="tcount"
                label="总票数"
                width="120">
        </el-table-column>
        <el-table-column
                prop="tprice"
                label="总票价"
                width="120">
        </el-table-column>

        <el-table-column
                prop="qprname"
                label="取票人名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="bzname"
                label="支付状态"
                width="120">
        </el-table-column>
        <el-table-column label="操作"  width="240"  fixed="right" align="center">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="reserve(scope.$index, scope.row)">去支付
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item  :label-width="formLabelWidth">
                <qriously class="tichet_yd" style="text-align: center;" :value="code_url" :size="338"/>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="success" @click="dialogFormVisible=false">取 消 支 付</el-button>
        </div>
    </el-dialog>
    <!--    分页查询-->
    <el-pagination
            style="width: 100%;margin-top: 20px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script>
    let scid = location.href.split('=')[1];
    new Vue({
        el: '#app',
        data() {
            return {
                orderNo: "",//订单id
                tableData: [],
                currentPage: 1,
                pageSize: 5,
                order:'',//我的订单
                code_url:'',//二维码
                dialogFormVisible:false,//弹出框默认不展示
                date:"",//现实格式化的时间
                timer1:"",//定时器
                paystatus:"",//记录

            }
        },
        created: function () {//页面初始化时,需要执行的业务可以放入该方法
            this.loadData();

        },
        methods: {//存放所有使用的方法
            loadData() {
                let _this = this;
                //使用axios向后台发请求
                axios.post('/tsb/queryMyOrder',
                    {
                        "pageNo": this.currentPage, "pageSize": this.pageSize,
                        data:{"userid":scid}
                    })
                    .then(function (response) {
                        if (response.data.code == 200) {
                            _this.tableData=response.data.data.list;
                            _this.total = response.data.data.total;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            handleDelete(row) {
                let _this = this
                this.$confirm('是否永远删除该订单?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/tsb/TsbDelete/" + row.orderno)
                        .then(function (response) {
                            _this.loadData()
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //根据编号查询
            reserve(index,row) {
                if (row.bzname=="付款成功"){
                    this.$message({
                        type: 'success',
                        message: '该订单以完成支付,不要重复支付!'
                    });
                }else{
                    this.dialogFormVisible=true;
                    let _this = this;
                    //使用axios向后台发请求
                    axios.get("/tsb/queryById?orderid="+row.orderid)
                        .then(function (response) {
                            if (response.data.code == 200) {
                                _this.order= response.data.data;
                                _this.orderNo=response.data.data.orderno;
                                // top.location.href = "/html/lvyoule_11_10/yuding/zhifu.html"
                                // localStorage.setItem("order",JSON.stringify(order))
                                //获取二维码
                                _this.getPayment()
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
            //获取支付二维码
            getPayment(){
                let _this = this
                axios.post('/pay/getNativeCodeUrl',_this.order)
                    .then(function (response) {
                        console.log(JSON.stringify(response.data))
                        if (response.data.code == 200) {
                            //赋值给微信支付
                            _this.code_url=response.data.data.code_url;
                            //定时器获取订单状态
                            _this.timer1=setInterval(()=>{
                                _this.queryPayStatus();
                            },3000)
                        } else {
                            alert("请先登录，再进项操作22222")
                            setTimeout(function () {
                                top.location.href = "/html/front/t-login.html"
                            }, 1000); // 定时时间
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            //判断是否付款
            queryPayStatus(orderNo) {
                var _this = this;
                axios.get("/pay/getPayStatus/" + _this.order.orderno)
                    .then(function (response) {
                        console.log(JSON.stringify(response.data))
                        _this.paystatus = response.data.data.trade_state_desc;
                        if (_this.paystatus == "支付成功") {
                            clearInterval(_this.timer1);
                            //修改订单状态
                            _this.setOrderA();

                        }
                    });
            },
            //修改订单状态
            setOrderA(){
                var _this = this;
                axios.post("/tsb/TsbUpdate",_this.order)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            //添加流水
                            _this.addPay();
                        } else {
                            alert(response.data.data)
                        }
                    })
            },
            //添加流水状态
            addPay(){
                var _this = this;
                //封装一个参数给流水记录
                let TBsnPay = {
                    "orderno":this.orderNo,
                    "serialno":new Date().getTime()+"liushui",
                    "pje":this.order.tprice,
                    "ptime":new Date(),
                    "respcode":"200",
                    "result":"1",
                    "fullmsg":JSON.stringify(this.order)
                }
                this.dialogFormVisible=false;
                _this.loadData()
            },
            //实行每页有多少条的方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.loadData();
            },
            //实现跳转页的方法
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.loadData();
            },
        }
    })
</script>
</body>
</html>